<script setup lang='ts'>
import type { VxePagerEvents } from 'vxe-table'

import { SearchForm, SearchTable } from '@fl/components'
import { ElTree } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import { treeData } from '../constant'

type Tree = {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

function filterNode(value: string, data: Tree) {
    if (!value)
        return true
    return data.label.includes(value)
}

const initialState = {
    hh: '',
}

const state = ref(cloneDeep(initialState))

const columns = [
    {
        colProps: {
            span: 12,
        },
        label: '一级项目名称',
        prop: 'hh',
        renderField: (_, onChange) => {
            return h(ElInput, {
                onChange,
                onKeydown: (event: any) => {
                    if (event.key === 'Enter') {
                        event.preventDefault()
                    }
                },
            })
        },
        valueType: 'Input',
    },
]

const gridOptions = reactive({
    columns: [
        { field: 'a1', title: '一级项目名称' },
        { field: 'a2', title: '项目负责人' },
        { fixed: 'right', slots: { default: 'opreate' }, title: '操作', width: 100 },
    ],
    data: [{}],
    height: 700,
    rowConfig: {
        keyField: 'enterpriseId',
    },
    showOverflow: false,
})

const initialPage = { currentPage: 1, pageSize: 10, total: 0 }

const tablePage = ref(cloneDeep(initialPage))

const visible = defineModel<boolean>('visible', { required: true })

const dialog = '选择项目'

const formRef = ref()

function cancel() {
    visible.value = false
}

function reset() {
    formRef.value.formInstance.resetFields()
}

function handleNodeClick(data: Tree) {
    console.log('🚀 ~ handleNodeClick ~ data:', data)
}

function search(val: any) {
    state.value = cloneDeep(val)
}

function resetSearchForm() {
    state.value = initialState
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="1100"
                :has-footer="false"
                fullscreen
                @cancel="cancel"
                @closed="reset"
    >
        <el-container class="h-900 overflow-y-auto">
            <el-aside width="250px"
                      class="p-10 mr-10 bg-#fff"
            >
                <div class="flex flex-col h-full">
                    <el-input v-model="filterText"
                              placeholder="请输入关键字"
                              class="mb-10"
                    />

                    <ElTree ref="treeRef"
                            style="flex:1;overflow:hidden auto"
                            class="filter-tree"
                            :data="treeData"
                            :props="defaultProps"
                            highlight-current
                            default-expand-all
                            :filter-node-method="filterNode"
                            :expand-on-click-node="false"
                            node-key="value"
                            @node-click="handleNodeClick"
                    />
                </div>
            </el-aside>

            <el-main class="bg-#fff">
                <div class="flex flex-col gap-20 h-full">
                    <div class="text-16 font-700">
                        项目列表
                    </div>

                    <SearchForm v-bind="state"
                                :columns="columns"
                                submit-text="查询"
                                class="mb-20"
                                :label-width="100"
                                @submit="search"
                                @reset="resetSearchForm"
                    />

                    <SearchTable v-bind="gridOptions"
                                 v-model:pager="tablePage"
                                 class="flex-1"
                                 @page-change="handlePageChange"
                    >
                        <template #opreate>
                            <el-button text
                                       @click="cancel"
                            >
                                选择
                            </el-button>
                        </template>
                    </SearchTable>

                <!-- <div class="bg-red flex-1 h-full" /> -->
                </div>
            </el-main>
        </el-container>
    </PlusDialog>
</template>
